<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-control" content="no-cache" />
  <meta http-equiv="Cache" content="no-cache" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <!-- favicon -->
  <link rel="shortcut icon" th:href="@{/static/slide/img/favicon.png}" type="image/x-icon" />

  <!-- title -->
  <title th:if="${systemTitle}" th:text="${modifyPwd}+${systemTitle}"></title>
  <title th:unless="${systemTitle}" th:text="${modifyPwd}+' | HZERO'"></title>

  <link th:href="@{/static/slide/css/bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" />
  <link th:href="@{/static/slide/css/find_password.css}" rel="stylesheet" />

  <script th:src="@{/static/slide/js/jquery.min.js}"></script>
  <script th:src="@{/static/slide/js/jsencrypt.min.js}"></script>
  <script th:src="@{/static/slide/js/jquery.validate.min.js}"></script>
  <script th:src="@{/static/slide/js/password-find.js}"></script>

  <template id="templateData"
    th:attr="data-copyright=${copyright},data-loginUrl=@{/login(template=${template})},data-modifyPwd=${modifyPwd},data-optionSucceeded=${optionSucceeded},data-optionFailed=${optionFailed},data-checkAccount=${checkAccount},data-resetPassword=${resetPassword},data-complete=${complete},data-validateAccountErr=${validateAccountErr},data-validateAccountFailed=${validateAccountFailed},data-userNameNotNull=${userNameNotNull},data-findAccount=${findAccount},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-cancel=${cancel},data-nextStep=${nextStep},data-preStep=${preStep},data-validatePwdRepeat=${validatePwdRepeat},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-getCaptcha=${getCaptcha},data-newPwdCanNotNul=${newPwdCanNotNul},data-resetPwdErr=${resetPwdErr},data-resetPwd=${resetPwd},data-pwdRepeatMsg=${pwdRepeatMsg},data-resetPwdSucceeded=${resetPwdSucceeded},data-loadingNow=${loadingNow},data-pwdRepeat=${pwdRepeat},data-validateLength=${validateLength},data-validateLower=${validateLower},data-validateUpper=${validateUpper},data-validateDigit=${validateDigit},data-validateSpecial=${validateSpecial},data-atLeast=${atLeast},data-validateUserName=${validateUserName},data-publicKey=${session.publicKey}">
  </template>

</head>

<body>
  <div id="app">
    <div class="password-container password-layout">
      <div class="password-layout-header">
        <div class="logo">
          <a th:href="@{/login(template=${template})}">
            <img height="24px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/slide/img/logo.png'" alt="HZERO" />
          </a>
        </div>
      </div>
      <div class="password-layout-content">
        <div class="password-tab">
          <div class="password-steps">
            <div class="password-steps-item password-steps-item-process"
              th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ? 'password-steps-item-finish' : ''">
              <div class="password-steps-item-icon">
                <span class="password-steps-icon"
                  th:text="${param.currentStep != null ? param.currentStep[0] : '0'} != '0'?'√':'1'">1</span>
              </div>
              <div class="password-steps-item-content">
                <div class="password-steps-item-title" th:text="${checkAccount}">确认账号</div>
              </div>
            </div>
            <div class="password-steps-item"
              th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ?'password-steps-item-process': 'password-steps-item-wait'">
              <div class="password-steps-item-icon">
                <span class="password-steps-icon"
                  th:text="${param.currentStep != null ? param.currentStep[0] : '0'} == '2'?'√':'2'">2</span>
              </div>
              <div class="password-steps-item-content">
                <div class="password-steps-item-title" th:text="${resetPassword}">重置密码</div>
              </div>
            </div>
            <div class="password-steps-item"
              th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} == '2' ? 'password-steps-item-process' : 'password-steps-item-wait'">
              <div class="password-steps-item-icon">
                <span class="password-steps-icon">3</span>
              </div>
              <div class="password-steps-item-content">
                <div class="password-steps-item-title" th:text="${complete}">完成</div>
              </div>
            </div>
          </div>

          <div class="password-spin-nested-loading">
            <div class="password-spin-container">

              <form id="formConfirmAccount" th:if="${param.currentStep != null ? param.currentStep[0] : '0'} == 0">
                <div class="password-form">
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input name="account" id="account" type="text" class="form-control password-form-input"
                              th:placeholder="${findAccount}">
                          </div>
                        </div>
                      </span>
                    </span>
                  </div>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-row">
                        <div class="password-col-12">
                          <span class="password-form-item-children-prefix">
                            <div class="password-input-content">
                              <span class="password-form-input-prefix">
                                <i class="glyphicon glyphicon-pencil"></i>
                              </span>
                              <div class="form-group password-form-item-children-input">
                                <input name="captcha" id="captcha" type="text" class="form-control password-form-input"
                                  th:placeholder="${captchaPlaceholder}">
                              </div>
                            </div>
                          </span>
                        </div>
                        <div class="password-col-12">
                          <a class="password-account-captcha">
                            <img class="password-account-captcha-image" src="/oauth/password/captcha.jpg"
                              alt="Captcha" />
                          </a>
                        </div>
                      </div>
                    </span>
                  </div>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-col-12">
                        <button type="button" class="btn btn-raised password-btn password-btn-cancel"
                          th:text="${cancel}"></button>
                      </div>
                      <div class="password-col-12">
                        <button type="submit"
                          class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                          th:text="${nextStep}"></button>
                      </div>
                    </span>
                  </div>
                </div>
              </form>

              <form id="formResetPassword" th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 1">
                <div class="password-form">
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input name="password" id="password" type="password"
                            th:placeholder="${resetPwd}"
                              class="form-control password-form-input">
                            <span class="glyphicon glyphicon-eye-close look"></span>
                          </div>
                        </div>
                      </span>
                      <div class="password-validate popover" style="display:block"></div>
                    </span>
                  </div>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <span class="password-form-item-children-prefix">
                        <div class="password-input-content">
                          <span class="password-form-input-prefix">
                            <i class="glyphicon glyphicon-user"></i>
                          </span>
                          <div class="form-group password-form-item-children-input">
                            <input name="passwordRepeat" id="passwordRepeat" type="password"
                              class="form-control password-form-input" th:placeholder="${pwdRepeat}">
                            <span class="glyphicon glyphicon-eye-close look"></span>
                          </div>
                        </div>
                      </span>
                    </span>
                  </div>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-row">
                        <div class="password-col-12">
                          <span class="password-form-item-children-prefix">
                            <div class="password-input-content">
                              <span class="password-form-input-prefix">
                                <i class="glyphicon glyphicon-pencil"></i>
                              </span>
                              <div class="form-group password-form-item-children-input">
                                <input name="passwordCaptcha" id="passwordCaptcha" type="text"
                                  class="form-control password-form-input" th:placeholder="${captchaPlaceholder}">
                              </div>
                            </div>
                          </span>
                        </div>
                        <div class="password-col-12">
                          <button type="button" class="btn btn-flat btn-raised password-form-button-captcha"
                            th:text="${getCaptcha}"></button>
                        </div>
                      </div>
                    </span>
                  </div>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <div class="password-col-12">
                        <button type="button" class="btn btn-raised password-btn password-btn-cancel"
                          th:text="${preStep}"></button>
                      </div>
                      <div class="password-col-12">
                        <button type="submit"
                          class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                          th:text="${complete}"></button>
                      </div>
                    </span>
                  </div>
                </div>
              </form>

              <form id="resetPasswordSuccess" class="password-success"
                th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 2">
                <div class="password-form">
                  <img src="/oauth/static/slide/img/illustrate_success.png" />
                  <p class="finish-fonts" th:text="${resetPwdSucceeded}"></p>
                  <div class="password-form-item">
                    <span class="password-form-item-children">
                      <button type="submit" class="btn btn-raised button-login" th:text="${loadingNow}"></button>
                    </span>
                  </div>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
      <div class="password-layout-footer"
        th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
      </div>
    </div>
  </div>
  <div class="password-notification"></div>
</body>

</html>